.richtext {

  // Remove bottom-margin on last element in richtext
  > *:last-child {
    margin-bottom: 0 !important;
  }

  //
  //
  // Headings
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.125em;
    margin-top: 1.375em;
    margin-bottom: .5em;

    &:first-child { margin-top: 0; }

    a { font-weight: inherit; }
  }

  // https://www.modularscale.com/?1&em&1.25
  h1 { font-size: 1.953em; }
  h2 { font-size: 1.563em; }
  h3 { font-size: 1.25em; }
  h4 { font-size: 1em; }
  h5 { font-size: 0.8em; }
  h6 { font-size: 0.64em; }

  //
  //
  // Text
  p {
    font-size: 1em;
    line-height: 1.65em;

    a {
      font-weight: 500;
    }

    img.inline {
      float: left;
      margin: 0 1em 1em 0;

      @include breakpoint(tablet, 'max') { 
        float: none;
        margin: 1em auto;
      }
    }
  }

  p, li {
    // If a <code> tag is within a <p> or <li> tag show it as a snippet
    code {
      @include inline_code();
    }
  }

  strong {
    color: $black;
    font-weight: 700;

    a {
      font-weight: inherit;
    }
  }

  p, li, h1, h2, h3, h4, h5, h6 {
    a {
      color: $black;
      border-bottom: 2px solid $light-grey;

      &:hover {
        border-color: rgba($green, .3);
        color: $green;
      }

      &[rel~="footnote"] {
        border-bottom: none;
        padding: 0 3px;
      }
    }

    strong a { font-weight: inherit; }
  }

  ul { @include list; }
  ol { @include list(ol); }

  .preamble {
    font-size: 1.2em;
    margin-bottom:1.75em;
    padding-bottom: 1.75em;
    border-bottom: 4px solid $border-color;

    p:last-child {margin-bottom: 0;}
  }

  blockquote {
    border-left: 4px solid $green;
    margin: 1.25rem 0 1.5rem 0;
    padding: .15em 0 .15em 1em;
    color: $black;

    &.right {
      float: right;
      margin: 0 0 1rem 1rem;
    }
    &.left {
      float: left;
      margin: 0 0 1rem 0;
    }

    &.right, &.left {
      width: 50%;
      padding: 0 0 0 1em;
      @include breakpoint(mobile, max) {
        display: none;
      }
      p {
        font-size: 1.25em;
        font-style: italic;
        font-weight: 900;
      }
    }

    blockquote {
      border-left-color: $light-grey;
    }

    p {
      color: $black;
      max-width: 680px;
    }

    *:last-child { margin-bottom: 0; }

    ol, ul {
      margin-top: 0;
    }
  }

  &--small blockquote { font-size: 1.125em; }

  aside {
    padding-left: 1rem;
    border-left: 1px solid $green;
    color: $black;
  }

  & > .block {
    display: block;
    max-width: 100%;
  }

  .left,
  .right {
    display: inline-block;
  }
  .left { float: left; }
  .right { float: right; }

  hr {
    border: 2px solid $border-color;
    clear: both;
    margin: 40px 0;

    @include breakpoint(tiny) { margin: 45px 0; }
    @include breakpoint(tablet) { margin: 50px 0; }
  }

  img {
    height: auto;
    margin: 0 auto;
    max-width: 100%;

    & + img {
      margin-bottom: 1em;
      margin-top: 1em;
    }
  }

  // borders for images in posts
  .border {
    &_light-grey { border: 1px solid $light-grey; }
    &_medium-grey { border: 1px solid $medium-grey; }
    &_black { border: 1px solid $black; }
  }

  mark {
    font-style: normal;
    padding: 2px 1px;
    background-color: $light-yellow;
    color: $body-copy-color;
    &.grey-background {
      background-color: $lightest-grey;
    }
    &.green {
      background-color: $light-green;
    }
  }

  .float {
    margin: auto;
    width: auto;
    &--left {
      float: left;
      margin: 0 1em 1em 0;
    }
    &--right {
      float: right;
      margin: 0 0 1em 1em;
    }
  }

  .footnotes {
    font-size: 0.8em;
    p { margin: 0; }
  }

  .wide-gutter-wrap {
    height: auto;
    width: 100%;

    @media (min-width: $desktop) {
      margin: $padding-large -20%;
      width: 140%;
    }
  }
}
